<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>科技蛇 - Tech Snake</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <div class="title-container">
                <h1 class="game-title">科技蛇<span>TECH SNAKE</span></h1>
                <div class="reactor">
                    <div class="reactor-core"></div>
                    <div class="reactor-ring ring1"></div>
                    <div class="reactor-ring ring2"></div>
                    <div class="reactor-ring ring3"></div>
                </div>
            </div>
            
            <div class="game-stats">
                <div class="stat-box score">
                    <span class="stat-label">分数</span>
                    <span id="score" class="stat-value">0</span>
                </div>
                <div class="stat-box high-score">
                    <span class="stat-label">最高分</span>
                    <span id="highScore" class="stat-value">0</span>
                </div>
                <div class="stat-box length">
                    <span class="stat-label">长度</span>
                    <span id="length" class="stat-value">1</span>
                </div>
                <div class="stat-box time">
                    <span class="stat-label">时间</span>
                    <span id="time" class="stat-value">0:00</span>
                </div>
                <div class="stat-box ai-score">
                    <span class="stat-label">AI分数</span>
                    <span id="aiScore" class="stat-value">0</span>
                </div>
                <div class="stat-box ai-length">
                    <span class="stat-label">AI长度</span>
                    <span id="aiLength" class="stat-value">1</span>
                </div>
            </div>

            <div id="effects" class="effects-container">
                <div class="effects-title">活动效果</div>
                <div class="effects-items"></div>
            </div>
        </div>

        <div class="game-field">
            <!-- 游戏画布 -->
            <div class="canvas-container">
                <canvas id="gameCanvas" width="800" height="600"></canvas>
                <div class="grid-overlay"></div>
                <div class="scanline"></div>
            </div>
            
            <!-- 移动设备控制器 -->
            <div class="mobile-controls">
                <div class="controls-wrapper">
                    <div class="d-pad">
                        <button id="upBtn" class="direction-btn up-btn">
                            <svg viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>
                        </button>
                        <button id="leftBtn" class="direction-btn left-btn">
                            <svg viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z"/></svg>
                        </button>
                        <button id="rightBtn" class="direction-btn right-btn">
                            <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>
                        </button>
                        <button id="downBtn" class="direction-btn down-btn">
                            <svg viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
                        </button>
                    </div>
                    <div class="action-buttons">
                        <button id="boostBtn" class="boost-btn">
                            <span class="boost-icon">加速</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="game-controls">
                <div class="control-panel">
                    <div class="control-group">
                        <label for="speedControl">速度控制</label>
                        <div class="slider-container">
                            <input type="range" id="speedControl" min="1" max="10" value="5">
                            <div class="slider-value" id="speedValue">5</div>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="difficultySelect">难度选择</label>
                        <select id="difficultySelect" class="difficulty-select">
                            <option value="easy">低风险</option>
                            <option value="medium" selected>标准</option>
                            <option value="hard">高危险</option>
                        </select>
                    </div>
                </div>
                
                <div class="button-group">
                    <button id="startBtn" class="cyber-button">
                        <span class="button-content">启动</span>
                        <span class="button-glitch"></span>
                    </button>
                    <button id="pauseBtn" class="cyber-button">
                        <span class="button-content">暂停</span>
                        <span class="button-glitch"></span>
                    </button>
                    <button id="restartBtn" class="cyber-button">
                        <span class="button-content">重启</span>
                        <span class="button-glitch"></span>
                    </button>
                    <button id="obstacleModeBtn" class="cyber-button toggle-button">
                        <span class="button-content">障碍模式</span>
                        <span class="button-glitch"></span>
                    </button>
                    <button id="aiModeBtn" class="cyber-button toggle-button">
                        <span class="button-content">AI对战</span>
                        <span class="button-glitch"></span>
                    </button>
                </div>
            </div>
        </div>

        <div class="food-guide">
            <h3 class="guide-title">能量源</h3>
            <div class="food-items">
                <div class="food-item">
                    <div class="food-icon normal"></div>
                    <div class="food-info">
                        <span class="food-name">标准能量</span>
                        <span class="food-desc">+10分</span>
                    </div>
                </div>
                <div class="food-item">
                    <div class="food-icon speedBoost"></div>
                    <div class="food-info">
                        <span class="food-name">速度强化</span>
                        <span class="food-desc">+15分, 速度提升</span>
                    </div>
                </div>
                <div class="food-item">
                    <div class="food-icon doubleScore"></div>
                    <div class="food-info">
                        <span class="food-name">双倍增益</span>
                        <span class="food-desc">+20分, 得分翻倍</span>
                    </div>
                </div>
                <div class="food-item">
                    <div class="food-icon shield"></div>
                    <div class="food-info">
                        <span class="food-name">防护屏障</span>
                        <span class="food-desc">+25分, 免疫碰撞</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 游戏介绍区域 -->
        <div class="game-instructions">
            <h3 class="instructions-title">游戏指南</h3>
            <div class="instructions-content">
                <div class="instruction-section">
                    <h4>基本操作</h4>
                    <ul>
                        <li><span class="key-highlight">方向键</span> 或 <span class="key-highlight">WASD</span> - 控制蛇的移动</li>
                        <li><span class="key-highlight">空格键</span> - 暂停/继续游戏</li>
                        <li>点击 <span class="key-highlight">加速</span> 按钮 - 临时提升速度</li>
                    </ul>
                </div>
                <div class="instruction-section">
                    <h4>游戏模式</h4>
                    <ul>
                        <li><span class="mode-highlight">标准模式</span> - 经典贪吃蛇玩法</li>
                        <li><span class="mode-highlight">障碍模式</span> - 地图中出现障碍物，增加挑战性</li>
                        <li><span class="mode-highlight">AI对战</span> - 与AI蛇竞争食物和分数</li>
                    </ul>
                </div>
                <div class="instruction-section mobile-hide">
                    <h4>提示技巧</h4>
                    <ul>
                        <li>吃到特殊食物可获得暂时的能力增益</li>
                        <li>护盾效果可以使蛇穿越边界，不会死亡</li>
                        <li>速度和难度会随着分数提升</li>
                        <li>速度越快，得分越高</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结束模态框 -->
    <div class="modal" id="gameOverModal">
        <div class="modal-content">
            <div class="particles" id="modalParticles"></div>
            <div class="modal-header">
                <span class="mode-badge" id="modeBadge">标准模式</span>
                <h2 class="modal-title">任务结束</h2>
            </div>
            <div class="score-container">
                <div class="score-item player-stats">
                    <span class="score-label">分数</span>
                    <span class="score-value" id="finalScore">0</span>
                </div>
                <div class="score-item player-stats">
                    <span class="score-label">长度</span>
                    <span class="score-value" id="finalLength">0</span>
                </div>
                <div class="score-item ai-stats" id="aiStatsContainer">
                    <span class="score-label">AI分数</span>
                    <span class="score-value" id="finalAiScore">0</span>
                </div>
                <div class="score-item ai-stats" id="aiLengthContainer">
                    <span class="score-label">AI长度</span>
                    <span class="score-value" id="finalAiLength">0</span>
                </div>
                <div class="score-item high-score">
                    <span class="score-label">最高分数</span>
                    <span class="score-value" id="finalHighScore">0</span>
                </div>
                <div class="score-item game-time">
                    <span class="score-label">游戏时间</span>
                    <span class="score-value" id="finalTime">0秒</span>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="cyber-button" id="modalRestartBtn">
                    <span class="button-content">重新开始</span>
                    <span class="button-glitch"></span>
                </button>
                <button class="cyber-button" id="modalMenuBtn">
                    <span class="button-content">返回菜单</span>
                    <span class="button-glitch"></span>
                </button>
                <button class="cyber-button" id="modalShareBtn">
                    <span class="button-content">分享成绩</span>
                    <span class="button-glitch"></span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 初始化加载提示 -->
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-content">
            <div class="loading-title">加载中</div>
            <div class="loading-spinner"></div>
            <div class="loading-progress">准备游戏资源...</div>
        </div>
    </div>

    <script src="js/game.js"></script>
    
    <!-- 确保资源加载完成后隐藏加载屏幕 -->
    <script>
        window.addEventListener('load', function() {
            // 延迟一小段时间确保所有资源加载完成
            setTimeout(function() {
                document.getElementById('loadingScreen').style.opacity = '0';
                setTimeout(function() {
                    document.getElementById('loadingScreen').style.display = 'none';
                }, 500);
            }, 500);
        });
    </script>
</body>
</html>
